// main content area layout

body.caerp .main_area {
	>main {
		flex: 1 0 auto;
		overflow: visible; // to allow stickiness

		&:focus {
			outline: 0 none;
		}

		&:only-child {
			max-width: 100%;
		}
	}

	.display_switch .contract {
		display: none;
	}
}

body.caerp .main_toolbar {
	background: var(--screen-trans-background-color);
	border-bottom: 1px dashed var(--border-color);
	margin-bottom: var(--padding-m);
	padding-bottom: 0;
	z-index: $actionLayer;

	&:not(.nav_tools) {
		position: sticky;
		top: 0;
	}

	+.main_toolbar {
		margin-top: -11px;
	}

	&:empty {
		border: 0 none;
		margin-top: 0;
	}

	ul.nav-pills {
		list-style-type: none;

		li {
			display: inline-block;
			padding: 0 var(--padding-m) 0 0;

			a,
			span {
				display: inline-block;
				padding: var(--padding-s) 0;
			}
		}
	}

	ul.breadcrumb {
		font-size: .825rem;
		line-height: 1.25;
		list-style-type: none;
		padding: var(--padding-m) 0;

		li {
			display: inline;
			padding: 0;

			a,
			span {
				display: inline;
			}

			&:not(.back_link):not(.active)::after {
				content: "\A0\25b8\A0";
			}
		}

		.icon svg {
			vertical-align: text-top;
		}
	}

	&.nav_tools ul.nav-pills {
		font-size: .825rem;
	}

	.flex {
		align-items: center;
		justify-content: space-between;

		>div {
			align-items: center;
			display: flex;
		}
	}

	.main_actions {
		min-height: var(--padding-7xl);
		padding-bottom: var(--padding-s);
		padding-top: var(--padding-s);

		.btn,
		button {
			align-items: center;
			display: flex;
			justify-content: center;
			margin: var(--padding-s) 0;
			min-height: calc( 2.25rem + 2px );

			&.dropdown-toggle+.dropdown-menu {
				top: calc( 1.625rem  + 16px );
			}
		}

		.dropdown-menu .btn,
		.dropdown-menu button {
			justify-content: flex-start;
		}

		button,
		.btn,
		.btn-group,
		.btn-container {

			+button,
			+.btn,
			+.btn-group,
			+.btn-container {
				margin-left: var(--padding-s);
			}
		}

		label.btn+label.btn {
			margin-left: 0;
		}

		div[role="group"] {
			>div+div {
				margin-left: var(--padding-s);
			}

			p {
				font-size: .875rem;
				padding-right: var(--padding-s);

				&:not(:first-child) {
					padding-left: var(--padding-m);
				}
			}
		}

		img+button,
		img+.btn,
		img+.btn-group {
			margin-left: var(--padding-m);
		}
	}

	dl {
		margin: 0;
	}

	label+input {
		display: block;
	}

	.buttons {
		align-self: center;
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-end;

		button:not(:only-child) {
			margin-left: var(--padding-s);
		}

		&:only-child {
			display: block;
			text-align: right;
			width: 100%;
		}
	}
}

@media (min-width: $mobileWidth ) {
	body.caerp .main_content {
		.limited_width {
			margin: 0 auto;
			max-width: 80rem;
			&.width20 {
				max-width: 20rem;
			}

			&.width30 {
				max-width: 30rem;
			}

			&.width40 {
				max-width: 40rem;
			}

			&.width50 {
				max-width: 50rem;
			}

			&.width60 {
				max-width: 60rem;
			}
		}
	}
}

@media (min-width: $desktopWidth ) {
	body.caerp .main_content {
		padding: 0 var(--variable-horizontal-padding-m) var(--variable-vertical-padding-m);

		.main_toolbar {
			margin-left: var(--negative-variable-horizontal-padding-m);
			margin-right: var(--negative-variable-horizontal-padding-m);
			padding-left: 1.875rem;
			padding-right: var(--variable-horizontal-padding-m);
		}

		.limited_width {
			margin: 0 auto;
			max-width: 80rem;
			&.width20 {
				max-width: 20rem;
			}

			&.width30 {
				max-width: 30rem;
			}

			&.width40 {
				max-width: 40rem;
			}

			&.width50 {
				max-width: 50rem;
			}

			&.width60 {
				max-width: 60rem;
			}
		}
	}
}

@media (min-width: $wideWidth ) {
	body.caerp:not(.aside_bottom) .main_area {
		display: flex;

		>main:only-child {
			overflow: auto;
		}

		>main:not(:only-child) {
			flex: 1 1 auto;
			max-width: calc(100% - 9.375rem);
			overflow: auto;
		}
	}

	body.caerp.aside_mini:not(.aside_bottom) .main_area {
		>main {
			max-width: calc(100% - 2rem);
		}
	}

	body.caerp[class*="instance_"]:not(.aside_bottom) .main_area {
		>main:not(:only-child) {
			max-width: calc(100% - 9.375rem - 10px);
		}
	}

	body.caerp.aside_mini[class*="instance_"]:not(.aside_bottom) .main_area {
		>main {
			max-width: calc(100% - 2rem - 10px);
		}
	}
}

@media (max-width: $desktopWidth ) {
	body.caerp .main_content {
		padding: 0 var(--variable-horizontal-padding-s) var(--variable-vertical-padding-xl);

		.main_toolbar {
			margin-left: var(--negative-variable-horizontal-padding-s);
			margin-right: var(--negative-variable-horizontal-padding-s);
			padding-left: var(--variable-horizontal-padding-s);
			padding-right: var(--variable-horizontal-padding-s);
		}
	}
}

@media (max-width: $tabletWidth ) {
	body.caerp .main_toolbar {
		.main_actions {

			.btn.icon_only_tablet,
			button.icon_only_tablet {
				display: block;
			}
		}
	}
}

@media (max-width: $mobileWidth ) {
	body.caerp .main_content {
		padding: 0 var(--variable-horizontal-padding-xs) var(--variable-vertical-padding-xl);
		max-width: calc(100vw - .625rem);

		.limited_width {
			max-width: calc(100vw - 24px);
		}
	}

	body.caerp .main_toolbar {
		margin-left: 0;

		.flex {
			>* {
				margin-bottom: var(--padding-s);
			}
		}

		.main_actions {

			.btn.icon_only_mobile,
			button.icon_only_mobile {
				display: block;
			}
		}
	}
}

@media print {

	// styles used when printing pages
	body.caerp .main_content {
		padding: 0;

		.limited_width {
			max-width: 100%;
			width: 100%;
		}
	}
}
